<template>
  <el-main>
    <el-tabs type="border-card">
      <el-tab-pane label="通用配置">
        <sys-dialog
          :title="sysDialog.title"
          :width="sysDialog.width"
          :height="sysDialog.height"
          :visible="sysDialog.visible"
          @onClose="sysDialogClose"
          @onConfirm="sysDialogConfirm"
        >
          <div slot="content">
            <el-form
              ref="entityForm"
              :model="entityModel"
              :rules="entityRules"
              :inline="true"
              label-width="80px"
            >
              <el-row>
                <el-form-item prop="key" label="配置键">
                  <el-input v-model="entityModel.key" placeholder="请输入配置键" />
                </el-form-item>
                <el-form-item prop="value" label="配置值">
                  <el-input v-model="entityModel.value" placeholder="请输入配置值" />
                </el-form-item>
                <el-form-item prop="remark" label="配置备注">
                  <el-input v-model="entityModel.remark" placeholder="请输入配置备注" />
                </el-form-item>
                <el-form-item prop="orderNum" label="显示顺序">
                  <el-input-number v-model="entityModel.orderNum" :min="1" />
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </sys-dialog>
        <el-form
          ref="searchForm"
          :model="searchModel"
          :rules="searchRules"
          :inline="true"
          label-width="80px"
        >
          <el-form-item v-if="checkPermission(['sys:config:search'])" prop="remark">
            <el-input v-model="searchModel.remark" placeholder="请输入配置备注" />
          </el-form-item>
          <el-form-item>
            <el-button v-if="checkPermission(['sys:config:search'])" icon="el-icon-search" @click="searchHandler()">查询</el-button>
            <el-button v-if="checkPermission(['sys:config:search'])" icon="el-icon-delete" @click="resethHandler()">重置</el-button>
            <el-button v-if="checkPermission(['sys:config:add'])" type="primary" icon="el-icon-plus" @click="addHandler()">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="tableList"
          style="width: 100%;margin-bottom: 18px;"
          row-key="id"
          border
          stripe
          highlight-current-row
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="key" label="配置键" />
          <el-table-column prop="value" label="配置值" />
          <el-table-column prop="remark" label="配置备注" />
          <el-table-column prop="orderNum" label="显示顺序" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作" align="center" width="250">
            <template slot-scope="scope">
              <el-button v-if="checkPermission(['sys:config:update'])" type="primary" icon="el-icon-edit-outline" @click="updateHandler(scope.row)">编辑</el-button>
              <el-button v-if="checkPermission(['sys:config:delete'])" type="danger" icon="el-icon-close" @click="deleteHandler(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="tableTotal>0"
          :total="tableTotal"
          :page.sync="searchModel.pageNum"
          :limit.sync="searchModel.pageSize"
          @pagination="fetchList"
        />
      </el-tab-pane>
      <el-tab-pane label="存储配置">
        <cloudStorage />
      </el-tab-pane>
    </el-tabs>
  </el-main>
</template>

<script>
import checkPermission from '@/utils/permission'
import { add, deleteById, update, getById, getPage } from '@/api/sysConfig'
import Pagination from '@/components/Pagination'
import SysDialog from '@/components/SysDialog'
import cloudStorage from './cloudStorage'
export default {
  name: 'SysConfig',
  components: {
    Pagination,
    SysDialog,
    cloudStorage
  },
  props: {},
  data() {
    return {
      loading: false,
      tableList: [],
      tableTotal: 0,
      sysDialog: {
        title: '系统提示',
        type: 'add',
        visible: false,
        width: 590,
        height: 150
      },
      entityModel: {
        id: null,
        key: null,
        value: null,
        remark: null,
        orderNum: null,
        createTime: null
      },
      entityRules: {
        key: [{ required: true, trigger: 'blur', message: '请输入配置键' }],
        value: [{ required: true, trigger: 'blur', message: '请输入配置值' }],
        remark: [{ required: true, trigger: 'blur', message: '请输入配置备注' }]
      },
      searchModel: {
        remark: null,
        orderNum: 1,
        pageNum: 1,
        pageSize: 10
      },
      searchRules: {
        remark: [{ required: true, trigger: 'blur', message: '请输入配置备注' }]
      }
    }
  },
  created() {
    this.fetchList()
  },
  mounted() {},
  methods: {
    checkPermission,
    fetchList(data) {
      this.loading = true
      // 分页信息改变
      if (data !== undefined) {
        this.searchModel.pageNum = data.page
        this.searchModel.pageSize = data.limit
      }
      // 分页获取列表
      getPage(this.searchModel).then(response => {
        if (response.code === 200) {
          this.tableList = response.data.list
          this.tableTotal = response.data.total
          this.searchModel.pageNum = response.data.pageNum
          this.searchModel.pageSize = response.data.pageSize
          this.loading = false
        }
      })
    },
    sysDialogOpen(title, type) {
      // 设置窗口属性
      this.sysDialog.title = title
      this.sysDialog.type = type
      this.sysDialog.visible = true
      // 重置表单内容
      this.$nextTick(() => {
        this.$refs.entityForm.resetFields()
        this.entityModel.id = null
      })
    },
    sysDialogClose() {
      this.sysDialog.visible = false
    },
    sysDialogConfirm() {
      this.$refs.entityForm.validate(valid => {
        if (valid) {
          if (this.sysDialog.type === 'add') {
            add(this.entityModel).then(response => {
              if (response.code === 200) {
                this.$notify.success({ title: '系统提示', message: response.msg })
                this.fetchList()
                this.sysDialogClose()
              }
            })
          }
          if (this.sysDialog.type === 'update') {
            update(this.entityModel).then(response => {
              if (response.code === 200) {
                this.$notify.success({ title: '系统提示', message: response.msg })
                this.fetchList()
                this.sysDialogClose()
              }
            })
          }
        }
      })
    },
    searchHandler() {
      this.$refs.searchForm.validate(valid => {
        if (valid) {
          this.fetchList()
        }
      })
    },
    resethHandler() {
      this.$refs.searchForm.resetFields()
      this.searchModel.pageNum = 1
      this.fetchList()
    },
    addHandler() {
      this.sysDialogOpen('新增系统配置表', 'add')
    },
    updateHandler(row) {
      this.sysDialogOpen('修改系统配置表', 'update')
      getById({ id: row.id }).then(response => {
        if (response.code === 200) {
          this.entityModel = response.data
        }
      })
    },
    deleteHandler(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById({ id: row.id }).then(response => {
          if (response.code === 200) {
            this.$notify.success({ title: '系统提示', message: response.msg })
            this.fetchList()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  margin: 0;
  padding: 0;
}
</style>
